import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/page_with_title.dart';

import '../../../widgets/app_widgets.dart';

class TransformPage extends PageWithTitle {
  const TransformPage() : super("变换组件(Transform)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("变换组件基于Matrix对绘制过程进行转换，它仅对绘制起作用，所以布局时不会考虑变"
          "换后的空间变化，优势是更新时仅需要重新绘制效率更高"),

      // Transform(transform: Transform.rotate(angle: angle),)
      AppSpacer.large,
      _Example(),
      AppSpacer.mini,
      UlItem("Transform"),
      BodyText("通过Matrix构建一个变换组件，如果我们只需要单一的变换，可以通过它对应的命名构"
          "造函数创建"),
      LabelText("- transform，应用于变换的矩阵"),
      LabelText("   - translate，位移"),
      LabelText("   - scale，缩放"),
      LabelText("   - rotate，旋转（绕z轴）"),
      LabelText("   - flip，翻转（绕x、y轴）"),
      LabelText("- origin，变换的坐标系原点（相对于组件左上角的偏移量）"),
      LabelText("- alignment，用于设置旋转、缩放变换的中心点"),
      LabelText("- filterQuality，过滤器质量，一般质量越好的采样算法消耗的计算量越高"),
    ];
  }
}

class _Example extends StatelessWidget {
  const _Example();

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          width: 40,
          height: 40,
          color: Theme.of(context).colorScheme.primaryContainer,
          child: Transform(
            transform: Matrix4.identity()
              ..scale(0.5, 0.5)
              ..translate(40.0, 40.0),
            child: Container(
              width: 40,
              height: 40,
              color: Theme.of(context).colorScheme.primary,
            ),
          ),
        ),
        AppSpacer.mini,
        Container(
          width: 40,
          height: 40,
          color: Theme.of(context).colorScheme.primaryContainer,
          child: Transform.translate(
            offset: const Offset(40, 0),
            child: Container(
              width: 40,
              height: 40,
              color: Theme.of(context).colorScheme.primary,
            ),
          ),
        ),
        AppSpacer.mini,
        Container(
          width: 40,
          height: 40,
          color: Theme.of(context).colorScheme.primaryContainer,
          child: Transform.scale(
            scaleX: 0.5,
            scaleY: 0.5,
            child: Container(
              width: 40,
              height: 40,
              color: Theme.of(context).colorScheme.primary,
            ),
          ),
        ),
        AppSpacer.mini,
        AppSpacer.mini,
        AppSpacer.mini,
        AppSpacer.mini,
        Container(
          width: 40,
          height: 40,
          color: Theme.of(context).colorScheme.primaryContainer,
          child: Transform.rotate(
            angle: pi / 4,
            child: Container(
              width: 40,
              height: 40,
              color: Theme.of(context).colorScheme.primary,
            ),
          ),
        ),
        AppSpacer.mini,
        AppSpacer.mini,
        AppSpacer.mini,
        AppSpacer.mini,
        Container(
          width: 40,
          height: 40,
          color: Theme.of(context).colorScheme.primaryContainer,
          child: Transform.flip(
            flipX: true,
            child: Container(
              width: 40,
              height: 40,
              color: Theme.of(context).colorScheme.primary,
              alignment: Alignment.center,
              child: Text(
                "翻转",
                style:
                    TextStyle(color: Theme.of(context).colorScheme.onPrimary),
              ),
            ),
          ),
        ),
      ],
    );
  }
}
